<template>
  <div class="maxWdith">
    <div class="block text-center">
      <el-carousel height="560px">
        <div class="ScrollImage">
          <el-carousel-item v-for="item of ScrollData" :key="item">
            <img :src="item.model.cover" />
          </el-carousel-item>
        </div>
      </el-carousel>
    </div>
  </div>
</template>

<script setup>
import { Dayselection } from "../../api/head";
import { useStore } from "vuex";
import { ref } from "vue-demi";

const ScrollData = ref();
let allData;
Dayselection.then((res) => {
  allData = res;
  console.log(allData[0].children);
  GetScroll();
});

/**
 * 获取滚动屏的图片
 */
const store = useStore();

async function GetScroll() {
  ScrollData.value = allData[0].children;
}
</script>

<style>
.maxWdith {
  max-width: 2000px;
  text-align: center;
  margin: 0 auto;
}

.ScrollImage {
  width: 100vw;
  height: 100%;

  background-image: linear-gradient(to right, #a8caba 0%, #5d4157 100%);
}
.ScrollImage image {
  width: 100%;
  height: 100%;
}
</style>